<template>
  <div>
    <el-row>
      <el-col :offset="1" :span="11">
        <el-card style="padding:40px 40px 20px 20px; height: 82vh;">
          <div slot="header" class="clearfix">
            <span>
              <strong>小区物业金额表：</strong>
            </span>
          </div>
          <el-table :data="moneyList" style="width: 100%" v-loading="loading">
            <el-table-column prop="parentCell.name" label="所属小区" width="180"></el-table-column>
            <el-table-column prop="number" label="应缴费用(元)" width="180"></el-table-column>
            <el-table-column label="编辑">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  icon="el-icon-delete"
                  type="danger"
                  @click="remove(scope.row)"
                  style="margin:5px 0 0 0"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <el-col :offset="1" :span="10">
        <el-card style="padding:40px 40px 20px 20px;height: 36vh; margin-bottom:25px; ">
          <el-form
            ref="form"
            :model="model"
            @submit.native.prevent="save"
            label-width="120px"
            style="max-width: 800px;"
          >
            <el-form-item label="设置物业费(元)">
              <el-input v-model="model.number" required clearable placeholder="￥"></el-input>
            </el-form-item>
            <el-form-item label="所属小区">
              <el-select v-model="model.parentCell" required filterable placeholder="请选择小区">
                <el-option
                  v-for="item in cellList"
                  :key="item._id"
                  :label="item.name"
                  :value="item._id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" native-type="submit">立即创建</el-button>
              <el-button @click="cancel" :plain="true">取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>


      <el-col :offset="1" :span="10">
        <el-card style="padding:40px 40px 20px 20px;height: 36vh;">
          <el-form
            ref="form"
            :model="upmodel"
            @submit.native.prevent="update"
            label-width="120px"
            style="max-width: 800px;"
          >
            
            <el-form-item label="需要修改物业">
              <el-select v-model="upmodel._id" required filterable placeholder="请选择修改目标">
                <el-option
                  v-for="item in moneyList"
                  :key="item._id"
                  :label="item.parentCell.name"
                  :value="item._id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="修改金额(元)">
              <el-input v-model="upmodel.number" required clearable placeholder="￥"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" native-type="submit">保存</el-button>
              <el-button @click="cancel" :plain="true">取消</el-button>
            </el-form-item>

          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: {},
      upmodel:{},
      moneyList: null,
      cellList: null,
      loading: true
    };
  },
  mounted() {
    this.fetch();
    this.fetchCell();
  },
  methods: {
    cancel() {
      this.fetch();
    },
    //获取列表
    async fetch() {
      const money_list = await this.$http.get("rest/money_list");
      this.moneyList = money_list.data;
      this.model = {};
      this.upmodel = {};
      this.loading = false;
    },
    //获取小区
    async fetchCell() {
      const cell_list = await this.$http.get("rest/cell_list");
      this.cellList = cell_list.data;
    },
    async save() {
      let flag = this.moneyList.every(item => {
        return item.parentCell._id != this.model.parentCell;
      });

      if (flag) {
        const response = await this.$http.post("rest/add_money", this.model);
        this.fetch();

        this.$message({
          type: "success",
          message: "保存成功",
          duration: 2000
        });
      } else {
        this.$message({
          type: "warning",
          message: "已存在该小区",
          duration: 2000
        });
      }
    },
    //删除
    remove(row) {
      this.$confirm(`是否删除?"${row.name}"`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        await this.$http.delete(`rest/money/${row._id}`);
        this.$message({
          type: "success",
          message: "删除成功!"
        });

        this.fetch();
      });
    },
    //更新
    async update(){

        await this.$http.put(`rest/money/${this.upmodel._id}`,this.upmodel);

        this.$message({
          type: "success",
          message: "更新成功!"
        });

        this.fetch();
    }
  }
};
</script>

<style lang="less" scoped>
</style>